<template>
	<view class="content">
		<view class="flex-body">
			<view class="flex-header-column">
				<swiper circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="imgterval"
					:duration="duration">
					<swiper-item>
						<view class="flex-header-row">
							<text class="text-one">{{ datetime0 }}</text>
							<text class="text-one">{{ datetime1 }}</text>
							<text class="text-one">{{ nowtime }}</text>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="flex-header-row">
							<text class="text-one">{{ datetime2 }}</text>
							<text class="text-one">{{ datetime3 }}</text>
							<text class="text-one">{{ datetime4 }}&nbsp;&nbsp;{{ datetime5 }}</text>
						</view>
					</swiper-item>
				</swiper>
				<view class="flex-header-network">
					<uni-icons :type="paperplname" size="30"></uni-icons>
				</view>
			</view>
			<view class="flex-one">
				<view class="flex-onleft-body">
					<swiper class="flex-beleft-swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
						:interval="intervalues" :duration="duration" @change="durationChange">
						<swiper-item v-if="shownoteData">
							<view class="flex-onleft-border">
								<text class="flex-onright-title">{{notetitle}}</text>
								<view class="flex-scroll_box">
									<swiper class="message-swiper" circular="true" vertical="true"
										display-multiple-items="5" :autoplay="autoplay" :interval="mesinterval"
										:duration="mesduration">
										<swiper-item v-for="(item,index) in messagelist" :key="index">
											<view class="flex-onright-item">
												<text class="flex-onright-message">{{item}}</text>
											</view>
										</swiper-item>
									</swiper>
								</view>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="flex-onleft-border">
								<text class="flex-onright-title">{{notetitles}}</text>
								<view class="flex-scroll_box">
									<swiper class="message-swiper" circular="true" vertical="true"
										display-multiple-items="5" :autoplay="autoplay" :interval="mesinterval"
										:duration="mesduration">
										<swiper-item v-for="(item,index) in messagelissest" :key="index">
											<view class="flex-onright-item">
												<view class="flex-onright-row">
													<text class="flex-onright-missae">{{item.chinese_date}}</text>
													<text class="flex-onright-missase">{{item.activity_name}}</text>
												</view>
											</view>
										</swiper-item>
									</swiper>
								</view>
							</view>
						</swiper-item>
					</swiper>
					<view class="swiper-margin-wrap">
						<swiper class="flex-onleft-swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
							:interval="imgterval" :duration="duration">
							<swiper-item v-for="(item, index) in swipers">
								<image class="flex-onleft-image" :src="item"></image>
							</swiper-item>
						</swiper>
					</view>
				</view>

				<view class="flex-onless-body">
					<view class="flex-onright-boby">
						<view class="flex-onright-bloum">
							<view class="flex-onright-border-bottom">
								<text class="flex-onright-text">今日入寺</text>
								<view class="flex-onright-mslight">{{statics0}}人</view>
							</view>
						</view>
						<view class="flex-onright-bloum">
							<view class="flex-onright-border-bottom">
								<text class="flex-onright-text">今日出寺</text>
								<view class="flex-onright-mslight">{{statics1}}人</view>
							</view>
						</view>
						<view class="flex-onright-bloum">
							<view class="flex-onright-border-bottom">
								<text class="flex-onright-text">当前寺内</text>
								<view class="flex-onright-mslight">{{statics2}}人</view>
							</view>
						</view>
						<view class="flex-onright-bloum">
							<view class="flex-onright-border-nbottom">
								<text class="flex-onright-text">预警等级</text>
								<view class="flex-onright-mslight">{{statics3}}</view>
							</view>
						</view>
					</view>
					<view class="flex-onright-body">
						<swiper class="flex-onright-swiper" circular :indicator-dots="indicatorDots"
							display-multiple-items="5" :autoplay="autoplay" :interval="mesinterves"
							:duration="mesdurates" vertical="true">
							<swiper-item v-for="(item, index) in iotarray">
								<view class="flex-onright-cloum">
									<view class="flex-onright-border-bottom">
										<text class="flex-onright-text">{{item.title}}</text>
										<view class="flex-onright-mslight">{{item.count}}<text
												class="font-size28">{{item.unit}}</text>
										</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import airport from '@/common/airport.js'
	import request from '@/common/request.js'
	export default {
		data() {
			return {
				nowtime: '',
				statics0: '-',
				statics1: '-',
				statics2: '-',
				statics3: '一级(安全)',
				datetime0: '',
				datetime1: '',
				datetime2: '',
				datetime3: '',
				datetime4: '',
				datetime5: '',
				title: 'Hello',
				paperplname: 'paperplane',
				indicatorDots: false,
				autoplay: true,
				mesinterval: 2000,
				interval: 30000,
				imgterval: 20000,
				intervalues: 60000,
				mesinterves: 4000,
				mesduration: 6000,
				mesdurates: 30000,
				duration: 2000,
				iotarray: [{
					code: 'temperature',
					title: '温  度',
					count: '-',
					unit: '℃'
				}, {
					code: 'humidity',
					title: '湿  度',
					count: '-',
					unit: '%RH'
				}, {
					code: 'tsp',
					title: '悬浮颗粒物',
					count: '-',
					unit: 'W/m'
				}, {
					code: 'pm25',
					title: 'PM2.5',
					count: '-',
					unit: 'ug/m³'
				}, {
					code: 'pm10',
					title: 'PM10',
					count: '-',
					unit: 'ug/m³'
				}, {
					code: 'noise',
					title: '噪  音',
					count: '-',
					unit: '分贝'
				}, {
					code: 'winddirection',
					title: '风  向',
					count: '-°',
					unit: ''
				}, {
					code: 'windspeed',
					title: '风  速',
					count: '-',
					unit: ''
				}, {
					code: 'pressure',
					title: '大气压',
					count: '-',
					unit: 'hPa'
				}, {
					code: 'Illuminance',
					title: '光照度',
					count: '-',
					unit: 'LUX'
				}, {
					code: 'negative_oxygen_ions',
					title: '负氧离子',
					count: '-',
					unit: 'cm3'
				}, {
					code: 'uv_index',
					title: '紫外线',
					count: '-',
					unit: 'μW/cm'
				}],
				swipers: [
					'http://portal.xumengte.com/taro-vue/active/caesar1.png',
					'http://portal.xumengte.com/taro-vue/active/caesar2.png',
					'http://portal.xumengte.com/taro-vue/active/caesar3.png'
				],
				notetitle: '公告',
				notetitles: '活动',
				notemessage: '',
				shownoteData: false,
				messagelist: [
					'\u3000\u3000寒山寺欢迎您！请排队购票，保持',
					'一米距离，入园请戴好口罩，打开健康',
					'码、行程码、入园请扫场所码，配合测',
					'量体温，谢谢配合。寒山寺欢迎您！请',
					'排队购票，保持一米距离，入园请戴好',
					'口罩，打开健康码、行程码、入园请扫',
					'场所码，配合测量体温，谢谢配合。',
					'\u3000\u3000寒山寺欢迎您！请排队购票，保持',
					'一米距离，入园请戴好口罩，打开健康',
					'码、行程码、入园请扫场所码，配合测',
					'量体温，谢谢配合。寒山寺欢迎您！请',
					'排队购票，保持一米距离，入园请戴好',
					'口罩，打开健康码、行程码、入园请扫',
					'场所码，配合测量体温，谢谢配合。'
				],
				messagelissest: [{
					chinese_date: '除夕至正月初一',
					activity_name: '新春吉祥平安法会'
				}, {
					chinese_date: '正月初九',
					activity_name: '新春祈福供天法会'
				}, {
					chinese_date: '四月初二/三/四',
					activity_name: '文殊开智法会'
				}, {
					chinese_date: '六月十九',
					activity_name: '观音法会'
				}, {
					chinese_date: '八月十五',
					activity_name: '中秋法会'
				}, {
					chinese_date: '九月十九',
					activity_name: '观音法会'
				}, {
					chinese_date: '腊月初一至初七',
					activity_name: '弥陀佛七'
				}],
			}
		},
		onLoad() {
			this.requestCommonServerData();
		},
		mounted() {
			this.showTime();
		},
		methods: {
			showTime() {
				let date = new Date();
				let hour = date.getHours();
				let minutes = date.getMinutes();
				var weekDay = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				hour = hour > 9 ? hour : '0' + hour;
				minutes = minutes > 9 ? minutes : '0' + minutes;

				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;

				this.datetime0 = year + '年' + month + '月' + day + '日';
				this.datetime1 = weekDay[date.getDay()];

				this.nowtime = hour + ":" + minutes;
			},
			durationChange(e) {
				console.log("durationChange==>>", e.detail.current)
				this.showTime();
				this.requestCommonServerData();
				this.requestCommonThirdData();
			},
			requestCommonServerData() {
				let that = this;
				let postdata = {
					model: "dtb.hss.activity",
					function_name: "_api_get_hss_activity",
					code: "notice"
				};
				request.post('api/v1/public_getattr/0', postdata).then(res => {
					console.log("requestCommonServerData==>>", res)
					if (res.errcode == 0) {
						let responseData = res.data;
						that.swipers = responseData.update_link_list;
						console.log('that.swipers==>>', that.swipers)
						let noteData = responseData.note;
						if (noteData) {
							this.shownoteData = true;
							let notestring = "\u3000\u3000" + responseData.note;
							that.messagelist = notestring.match(/.{1,17}/g)
						}
						let chineseDate = responseData.chinese_date;
						let dateArray = chineseDate.split(' ');
						that.datetime0 = dateArray[0];
						that.datetime1 = dateArray[1];
						that.datetime2 = dateArray[2];
						that.datetime3 = dateArray[3];
						that.datetime4 = dateArray[4];
						that.datetime5 = dateArray[5];
						that.paperplname = 'paperplane-filled';
					} else {
						that.paperplname = 'paperplane';
					}
					that.requestCommonSecondData();
				});
			},
			requestCommonSecondData() {
				let that = this;
				let postdata = {
					model: "dtb.hss.activity",
					function_name: "_api_get_hss_activity",
					code: "activity"
				};
				request.post('api/v1/public_getattr/0', postdata).then(res => {
					console.log("requestCommonSecondData==>>", res)
					if (res.errcode == 0) {
						let responseData = res.data;
						that.messagelissest = responseData.activity_line;
					}
					that.requestCommonThirdData();
				});
			},
			requestCommonThirdData() {
				let that = this;
				let postdata = {
					model: "dtb.environment.curr.value",
					function_name: "_api_dtb_environment"
				};
				request.post('api/v1/public_getattr/0', postdata).then(res => {
					console.log("requestCommonThirdData==>>", res)
					if (res.errcode == 0) {
						let responseData = res.data;
						console.log("responseData==>>", responseData)
						responseData.forEach(function(item, index) {
							that.iotarray.forEach(function(items, indexs) {
								if (item.dtb_environment_code == items.code) {
									items.count = item.value;
								}
							});
						});
					}
				});
				let postdatas = {
					model: "dtb.statistics",
					function_name: "_api_dtb_statistics"
				};
				request.post('api/v1/public_getattr/0', postdatas).then(res => {
					if (res.errcode == 0) {
						let responseData = res.data;
						let responseDatall = res.data_all;
						that.statics0 = Math.abs(responseData['temple_in']);
						that.statics1 = Math.abs(responseData['temple_out']);;
						that.statics2 = Math.abs(responseData['obj_xiu_num']);
						let warning = responseData['warning'];
						// if (warning.match('one')) {
						// 	that.statics3 = '一级(安全)'
						// } else if (warning.match('two')) {
						// 	that.statics3 = '二级(安全)'
						// } else if (warning.match('three')) {
						// 	that.statics3 = '三级(安全)'
						// } else if (warning.match('four')) {
						// 	that.statics3 = '四级(安全)'
						// }
						that.statics3 = warning
					}
				});
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.flex-body {
		width: 100vw;
		height: 100vh;
		background-color: #DAE4EE;
		display: flex;
		flex-direction: column;
	}

	.flex-header-column {
		margin-bottom: 1vw;
		width: 100%;
		height: 5vw;
		display: flex;
		background-color: rgba(255, 255, 255, 0.8);
		flex-direction: column;
	}

	.flex-header-network {
		position: absolute;
		margin: 8px;
		right: 8px;
	}

	.flex-header-row {
		display: flex;
		width: 92%;
		margin-left: 4%;
		margin-right: 4%;
		height: 5vw;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.text-one {
		color: #053E65;
		font-size: 26px;
	}

	.flex-one {
		display: flex;
		width: 98vw;
		height: 98vh;
		margin-left: 1vw;
		margin-right: 1vw;
	}

	.flex-two {
		display: flex;
		width: 96vw;
		height: 96vh;
		margin: 1vw 1vw;
	}

	.flex-onleft-body {
		display: flex;
		flex-direction: column;
		width: 72vw;
		height: 96vh;
	}

	.flex-beleft-swiper {
		width: 70vw;
		padding-top: 2px;
		padding-left: 2px;
		padding-right: 2px;
		height: 29vh;
	}

	.flex-onless-body {
		display: flex;
		flex-direction: column;
		width: 28vw;
		height: 96vh;
	}

	.swiper-margin-wrap {
		width: 70vw;
		height: 66vh;
	}

	.flex-onleft-swiper {
		width: 70vw;
		height: 66vh;
	}

	.flex-onright-swiper {
		width: 28vw;
		height: 52vh;
		-webkit-mask-image: linear-gradient(transparent, white 20px, white calc(100% - 20px), transparent);
	}

	.swiper-margin-item {
		width: 70vw;
		height: 62vh;
	}

	.flex-onleft-image {
		width: 68vw;
		border-radius: 24px;
		background: url("@/static/caesar.png") no-repeat;
		height: 66vh;
		margin: 0px 12px;
	}

	.flex-onright-boby {
		display: flex;
		flex-direction: column;
		width: 26vw;
		height: 43vh;
		margin: 14px 4px;
		border-width: 1px;
		border-style: solid;
		border-radius: 24px;
		border-color: #CDD3D4;
		background-color: #E9F2F5;
	}

	.flex-onright-body {
		display: flex;
		flex-direction: column;
		width: 26vw;
		height: 50vh;
		margin: 0.6vw 4px;
		border-width: 1px;
		border-style: solid;
		border-radius: 24px;
		border-color: #CDD3D4;
		background-color: #E9F2F5;
	}

	.flex-onright-bloum {
		display: flex;
		flex-direction: column;
		width: 26vw;
		height: 11vh;
		align-items: center;
	}

	.flex-onright-cloum {
		display: flex;
		flex-direction: column;
		width: 26vw;
		height: 10vh;
		align-items: center;
	}

	.flex-onright-border-bottom {
		display: flex;
		flex-direction: column;
		width: 20vw;
		height: 11vh;
		align-items: center;
		justify-content: center;
		border-bottom: 1px solid #778FA555;
	}

	.flex-onright-border-nbottom {
		display: flex;
		flex-direction: column;
		width: 20vw;
		height: 11vh;
		align-items: center;
		justify-content: center;
	}

	.flex-onright-title {
		font-family: FZQKBYSJW;
		color: #05436D;
		font-weight: bold;
		letter-spacing: 8px;
		font-size: 48px;
		margin: 16px;
	}

	.flex-onright-item {
		width: 64vw;
		height: auto;
	}

	.flex-onright-message {
		color: #05436D;
		flex: 1;
		letter-spacing: 0.6vw;
		font-size: 3vw;
		line-height: 3vw;
		font-family: MiSans-Regular;
	}

	.flex-onright-missae {
		color: #05436D;
		flex: 5;
		font-size: 32px;
		line-height: 32px;
		font-family: MiSans-Regular;
	}

	.flex-onright-missase {
		color: #05436D;
		flex: 4;
		font-size: 32px;
		line-height: 32px;
		font-family: MiSans-Regular;
	}

	.flex-onright-row {
		display: flex;
	}

	.flex-onright-name {
		color: #05436D;
		letter-spacing: 4px;
		font-size: 36px;
		line-height: 36px;
		font-family: MiSans-Regular;
	}

	.text-indent2 {
		padding: 8px;
		margin: 16px;
		text-indent: 2em;
	}

	.flex-scroll_box {
		width: 64vw;
		height: 24vh;
		padding: 2px 8px;
		margin: 8px 16px;
	}

	.message-swiper {
		width: 64vw;
		height: 21vh;
		-webkit-mask-image: linear-gradient(transparent, white 20px, white calc(100% - 20px), transparent);
	}

	.flex-onright-text {
		font-family: FZQKBYSJW;
		color: #05436D;
		letter-spacing: 2px;
		font-size: 3vw;
		margin: 2px;
	}

	.flex-onright-mslight {
		font-family: MiSans-Light;
		color: #05436D;
		letter-spacing: 2px;
		font-size: 3vw;
		margin: 2px;
	}

	.font-28 {
		font-family: MiSans-Light;
		color: #05436D;
		font-size: 28px;
		margin: 2px;
	}

	.font-size28 {
		margin-left: 8px;
		font-size: 2vw;
	}

	.color-red {
		color: red;
	}

	.flex-onleft-border {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 68vw;
		height: 27vh;
		margin: 12px 8px;
		border-width: 1px;
		border-style: solid;
		align-items: center;
		border-radius: 24px;
		border-color: #CDD3D4;
		background-color: #E9F2F5;
	}

	.flex-onrighs {
		display: flex;
		flex-direction: column;
		width: 26vw;
		height: 33vh;
	}

	.flex-onrighsbor {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 26vw;
		height: 22vw;
		margin: 4px;
		border-width: 1px;
		border-style: solid;
		border-radius: 12px;
		border-color: rgba(137, 131, 142, 1);
		background-color: rgba(32, 50, 50, 1);
	}
</style>
